<template>
  <view class="recommend-container">
    <view class="recommend">
      <view class="recommend-header">
        {{title}}
        <view class="refresh-btn" @click="refreshRecommendations">
          <uni-icons type="refresh" size="16" color="#666"></uni-icons>
          <text>换一批</text>
        </view>
      </view>
      <view class="recommend-content">
        <scroll-view scroll-x="true" class="scroll-view-H" :scroll-left="scrollLeft" scroll-with-animation>
          <view v-for="item in currentList" :key="item.id" class="scroll-view-H-item" @click="gotoBookInfo(item)">
            <image :src="item.cover" class="cover" mode="aspectFill"></image>
            <view class="book-info">
              <view class="title">{{item.title}}</view>
              <view class="author">{{item.author}}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    name: "my-recommend",
    props: {
      title: {
        type: String,
        default: '推荐书籍'
      },
      type: {
        type: String,
        default: 'recommend'
      }
    },
    data() {
      return {
        currentList: [], // 当前显示的书籍列表
        scrollLeft: 0, // 横向滚动位置
        isLoading: false // 加载状态
      }
    },
    created() {
      console.log('获取图书推荐数据')
      this.fetchRecommendations()
    },
    watch: {
      type() {
        this.fetchRecommendations()
      }
    },
    methods: {
      // 根据类型获取推荐书籍
      async fetchRecommendations() {
        if (this.isLoading) return
         
         this.isLoading = true
         try {
           const {data}=await uni.$http.get(`/recommend?type=${this.type}`)
           this.currentList = data.data.slice(0, 10) // 只显示前10本
           this.scrollLeft = 0 // 重置滚动位置
         } catch (error) {
           console.error('获取推荐书籍失败:', error)
           uni.showToast({
             title: '获取推荐失败',
             icon: 'none'
           })
         } finally {
           this.isLoading = false
         }
      },

      // 刷新推荐
      refreshRecommendations() {
        this.fetchRecommendations()
      },

      // 跳转书籍详情
      gotoBookInfo(item) {
        uni.navigateTo({
          url: `/subpkg/book_info/book_info?id=${item.id}&title=${item.title}`
        })
      }
    }
  }
</script>

<style lang="scss">
  .recommend-container {
    margin: 20rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .recommend {
      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        border-bottom: 1rpx solid #f5f5f5;

        .refresh-btn {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #666;

          text {
            margin-left: 8rpx;
          }
        }
      }

      &-content {
        padding: 20rpx;
        height: 280rpx;
      }
    }

    .scroll-view-H {
      white-space: nowrap;
      width: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .scroll-view-H-item {
      display: inline-block;
      width: 160rpx;
      margin-right: 20rpx;
      vertical-align: top;

      &:last-child {
        margin-right: 0;
      }

      .cover {
        width: 160rpx;
        height: 200rpx;
        border-radius: 8rpx;
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
      }

      .book-info {
        margin-top: 12rpx;

        .title {
          font-size: 26rpx;
          font-weight: bold;
          color: #333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .author {
          margin-top: 8rpx;
          font-size: 22rpx;
          color: #999;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .rating {
          margin-top: 8rpx;
          font-size: 22rpx;
          color: #ffb400;
        }
      }
    }
  }
</style>
